<template>
  <div class="main">
    <basic-layout title="故障报修" :showAddBtn="true"
                  @handleAdd="jumpToEdit"
                  @handleFilter="$refs.queryPopupRef.show = true">
      <van-tabs v-model:active="active" @click="tabClick">
        <van-tab title="待维修"></van-tab>
        <van-tab title="已维修"></van-tab>
      </van-tabs>
      <van-row class="listCard">
        <van-pull-refresh
          v-if="dataList.length"
          style="min-height: 100%;"
          class="cardVanPullRefresh"
          v-model="refreshing"
          @refresh="onRefresh">
          <van-list
            v-if="dataList.length > 0"
            v-model="loading"
            :finished="finished"
            finished-text="已经到底"
            @load="nextPage"
          >
            <div v-for="item in dataList" class="dataStyle">
              <div class="hengXian">
                <div class="dataBStyle">
                  <div class="listLeft">
                    <span class="ziti">{{ item.SBMC }}</span>
                  </div>
                  <div class="dh">
                    <span style="color: #aaa">{{ item.WEIXGDH }}</span>
                    <div class="aImgStyle1">
                      <span v-if="item.STATUS == '工单关闭'" style="color: #aaaaaa">已维修</span>
                      <span class="imgStyle" v-else style="color: red">待维修</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="listMain">
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">申请人:&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;{{
                    item.SHENQRMC
                  }}
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:&nbsp;&nbsp;&nbsp;&nbsp;</span>{{
                    item.YIDDH
                  }}
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">申请时间:&nbsp;&nbsp;&nbsp;&nbsp;</span>{{
                    item.SHENQSJ
                  }}
                </div>
                <div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-row>
    </basic-layout>
  </div>
</template>
<script>
import { getReportHistory, getDetailBySwid } from '@api/srvAssurance/assetLabel/assetLabel'

export default {
  components: {},
  data () {
    return {
      dataInfo: {},
      dataList: [],
      active: 0,
      loading: false,
      finished: false,
      refreshing: false,
      queryParam: {
        pageIndex: 1,
        pageSize: 10,
        type: '0',
      },
    }
  },

  created () {
    this.initData()
  },

  methods: {
    onRefresh () {
      this.initData()
    },

    async initData () {
      this.queryParam.pageIndex = 1
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },
    tabClick (val) {
      this.queryParam.type = val
      this.initData()
    },
    // 加载下一页
    nextPage () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (
        this.dataList.length <
        this.queryParam.pageIndex * this.queryParam.pageSize
      ) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.queryParam.pageIndex += 1
        this.getDataList()
      }, 1000)
    },

    async getDataList () {
      this.loading = true
      let res = await getReportHistory(this.queryParam)
      if (res.status == 0) {
        if (this.queryParam.pageIndex == 1) {
          // 清空列表数据
          this.dataList = []
        }
        this.dataList = this.dataList.concat(res.data)
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataList.length >= res.totalCount) {
          this.finished = true
        }
      }
      this.loading = false
    },
    async jumpToEdit () {
      let _this = this
      wx.scanQRCode({
        desc: 'scanQRCode desc',
        needResult: 1, // 默认为0，扫描结果由i国网处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: async function (res) {
          if (res.resultStr) {
            let queryParam = {}
            queryParam.swid = res.resultStr
            let resData = await getDetailBySwid(queryParam)
            if (resData.status == 0) {
              let data = resData.data[0]
              data.isWeixIng = data.isWeixIng == 'yes' ? '是' : '否'
              _this.$router.push({
                path: '/faultRepair/inspectionEdit',
                query: {
                  dataInfo: data,
                },
              })
            }
          }
        },
        error: function (res) {
          if (res.errMsg.indexOf('function_not_exist') > 0) {
            alert('版本过低请升级')
          }
        },
      })

    },
  },
}
</script>

<style scoped lang="less">
.main {
  height: 100%;
  background-color: #8080803b;
  .listCard {
    .cardVanPullRefresh {

      .dataStyle {
        height: 146px;
        margin: 10px;
        background-color: #FFFFFF;
        line-height: 23px;
        border-radius: 3px;
        font-size: 0.4rem;

        .hengXian {
          box-sizing: border-box;
          border-bottom: 1px solid #eee;
          line-height: 0.64rem;
        }

        .dataBStyle {
          height: 55px;
          position: relative;

          .listLeft {
            margin-left: 10px;
            font-size: 0.4rem;
            font-weight: bold;
            padding-top: 9px;

            .ziti {
              margin-top: 1px;
            }

          }

          .dh {
            margin-left: 10px;
            font-size: 0.3rem;

            .aImgStyle1 {
              position: absolute;
              top: 0.4667rem;
              right: 0.4rem;
              font-size: 15px;
              margin-left: 78%;
            }
          }
        }


        .listMain {
          line-height: 29px;
          position: relative;

          .downOtherProcess {
            width: 80%;
            float: left;
          }

          .downOtherText {
            transform: translateY(-5px);
            width: 100%;
          }
        }
      }

      /deep/ .van-progress__pivot {
        display: none;
      }

      /deep/ .van-progress {
        height: 11px;
        margin-top: 4px;
      }



      .custom-image {
        height: 100%;
      }
    }
  }
}
/deep/ .van-tabs__line {
  background: #4eb3e9;
}

/deep/ .van-tabs__nav {
  background-color: #FFFFFF;
}
</style>
